<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>sku</title>
    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
<style>
html,body{width:100%;height: 100%; overflow: hidden; background: transparent;}
.skubox-bg{background: rgba(0,0,0,0.5);position:fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;animation:fadeIn 1s;-webkit-animation:fadeIn 1s;}
.skubox{
    background:#fff;position:fixed;left: 0;right: 0;bottom: 0;z-index:2;
    display: flex;flex-direction: column; animation:updown 0.1s;-webkit-animation:updown 0.1s;
}
.skubox .boxbar{padding:15px; height: 75px; overflow: hidden;}
.skubox .boxbar .shopimg{width:75px;height:75px;overflow:hidden;}
.skubox .boxbar .shopimg img{width: 100%;}
.skubox .boxbar .info{ padding-left: 10px; position: relative;}
.skubox .boxbar .info .price-box{ font-size: 18px;color: #FF9502;font-weight: 700;padding: 6px 0 2px 0;}
.skubox .boxbar .info .price-box em{ font-size: 20px;color: #FF9502;}
.skubox .boxbar .info .close{ width:18px; height:18px; position: absolute; top:0px; right: 0px;}
.skubox .boxbar .info .close img{ width:100%; opacity: 0.8;}
.skubox .boxbar .info .kunum{ line-height: 20px;font-size: 12px;color: #666666;}
.skubox .boxbar .info .sku{ line-height: 20px;font-size: 12px;color: #666666;}

/* skulist */
.skulist{ overflow-y: auto; height:200px; padding: 0px 15px;}
.skulist .skutit{ line-height:30px; padding-top: 10px; font-size: 13px;}
.skulist .skudata{ padding: 3px 0px;}
.skulist .skudata span{text-align:center; min-width:37px; line-height: 28px; padding:0 10px; margin-right:8px; margin-bottom: 10px;display: inline-block; background-color: #F5F5F5; color: #333333;font-size: 12px;border-radius: 16px;}
.skulist .skudata span.on{ color: #FFFFFF; background-color: #FF9502; }

.numbar span{font-size:16px;color:#b5b5b5;background: #F5F5F5;width:34px;height: 30px;align-items: center;justify-content: center;}
.numbar .jian{border-radius:20px 2px 2px 20px;}
.numbar .jia{border-radius:2px 20px 20px 2px;}
.numbar em{color: #333333;background: #F5F5F5;width:42px;line-height:30px;margin: 0 1px;font-size:14px;text-align: center;display:block;}

#fotbar{background-color: #FFF;}
#fotbar .button{ padding: 15px 15px 25px 15px;}
#fotbar .button .btn{height: 42px;border-radius:20px;text-align: center;color: #FFFFFF;font-size:14px;line-height: 42px;background: #FF9502;}
#fotbar .button .btn.l{margin-right: 15px;background: #ffffff;color: #FF9502;}
#fotbar .button .btn.l::before{border: 1px solid #FF9502;border-radius:60px;}
#fotbar .button .btn.r{background: #FF9502;}

</style>
</head>
<body>
<div id="vuea" >
    <div class="skubox-bg" tapmode onclick="closeClick();"></div>
    <div class="skubox">
        <div class="boxbar flex">
            <div class="shopimg"><img :src="def.image" /></div>
            <div class="info flex1">
                <div class="close" tapmode onclick="closeClick();"><img src="../../../image/main0/del_sku.png"/></div>
                <div class="price-box">
                    <!--普通商品和积分商品的价格-->
                    <em v-if="shoptype == 'shop' || shoptype == 'jifen'" style="font-size:17px;">￥</em><em v-if="shoptype == 'shop' || shoptype == 'jifen'" v-text="def.price"></em>
                    <em v-if="shoptype =='jifen'">+<em v-text="def.unscore"></em><em style="font-size:17px;">积分</em></em>
                    <!--新人商品的价格-->
                    <em v-if="shoptype == 'xinren' && xtype == 'rmb'" style="font-size:17px;">￥</em><em v-if="shoptype == 'xinren' && xtype == 'rmb'" v-text="def.price"></em>
                    <em v-if="shoptype == 'xinren' && xtype == 'scoreandrmb'" style="font-size:17px;">￥</em><em v-if="shoptype == 'xinren' && xtype == 'scoreandrmb'" v-text="def.price"></em>
                    <!--新人商品需要显示积分的-->
                    <em v-if="shoptype =='xinren' && xtype == 'score'"><em v-text="def.unscore"></em><em style="font-size:17px;">积分</em></em>
                    <em v-if="shoptype =='xinren' && xtype == 'scoreandrmb'">+<em v-text="def.unscore"></em><em style="font-size:17px;">积分</em></em>
                </div>
                <div class="kunum" v-if="def.num" v-text="'库存 ' +  def.num"></div>
                <div class="sku" id="guige_key" v-if="def.key != '-no-'" v-text="'已选择 ' + def.key"></div>
                <div class="sku" v-if="def.key == '-no-'">默认规格</div>
            </div>
        </div>
        <div class="skulist">
            <div v-for="(item,key) in Pdata.skudata.tit">
                <div class="skutit" v-text="item"></div>
                <div class="skudata border-bottom">
                    <span v-for="(v,i) in Pdata.skudata.val[key]" tapmode onclick="skuItemClick(this)" :data-key="v" v-funtext="v" ></span>
                </div>
            </div>
            <div class="skutit">
                <span class="flex1">购买数量</span>
                <div class="numbar flex">
                    <span class="jian flex" data-type="1" tapmode onclick="setBuyNumClick(this);">
                    	<img style="display:block;width:10px;height:2px;" src="../../../image/main0/sku_1.png"/>
                    </span>
                    <em class="buynum" v-text="_selData.buynum"></em>
                    <span class="jia flex" data-type="2" tapmode onclick="setBuyNumClick(this);" :data-max="def.maxbuynum">
                    	<img style="display:block;width:10px;height:9px;" src="../../../image/main0/sku_2.png"/>
                    </span>
                </div>
            </div>
        </div>
        <div id="fotbar">
            <div id="app-footer">
                <div class="button flex" style="display:none;" :style="{ display:(shoptype == 'shop' ? '':'none')}" v-if="shoptype == 'shop'">
                    <span class="btn l flex1 border-all" tapmode data-type="addcart" onclick="submitClick(this)">加入购物车</span>
                    <span class="btn r flex1" tapmode data-type="buy" onclick="submitClick(this)">立刻购买</span>
                </div>
                <div class="button flex" style="display:none;" :style="{ display:(shoptype == 'editsuk' ? '':'none')}" v-if="shoptype == 'editsuk'">
                    <span class="btn flex1" tapmode data-type="editsuk" onclick="submitClick(this)">确定</span>
                </div>
                <div class="button flex" style="display:none;" :style="{ display:(shoptype == 'jifen' ? '':'none')}" v-if="shoptype == 'jifen'">
                    <span class="btn flex1" tapmode data-type="jifen" onclick="submitClick(this)">立即购买</span>
                </div>
                <div class="button flex" style="display:none;" :style="{ display:(shoptype == 'xinren' ? '':'none')}" v-if="shoptype == 'xinren'">
                    <span class="btn flex1" tapmode data-type="xinren" onclick="submitClick(this)">立即购买</span>
                </div>
                <!-- <div class="button flex" style="display:none;" :style="{ display:(shoptype == 'tuanshop' ? '':'none')}" v-if="shoptype == 'tuanshop'">
                    <span class="btn flex1" tapmode data-type="gotuan" onclick="submitClick(this)">立即购买</span>
                </div> -->
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../../../script/base.min.js" ></script>
<script type="text/javascript">
	//购买的数据
	var _selData = { buynum:1 };
    //规格的所有参数
    var _pData = {};
    lanYun.setFooter('app-footer');
	define(function (require, exports, module) {
        lanYun.isBtn = 0;
	    pageParam = api.pageParam;
        var skuData = pageParam.skudata || {};
        _selData.buynum = pageParam.buynum;

        //console.log(JSON.stringify(pageParam));
	    getData = function(loading) {
			lanYun.getVueData({url:'storesGoods/getsku',get:{id:pageParam.sid,type:pageParam.goutype,need:1}, loading:loading}, function(ret) {
                //console.log(JSON.stringify(ret));
                if(ret.errcode == 0){
                    lanYun.isBtn = 1;
                    lanYun.vue.def = ret.data.skudata.def;
                    _pData.skudata = ret.data.skudata.info;
                    _pData.defsku = _pData.skudata[pageParam.key] || null;
                    //前一页无规格默认选中第一个
                    if(!pageParam.key){
                        _selData.key = ret.data.skudata.def.key;
                        _pData.defsku = ret.data.skudata.def;
                    }else {
                        _selData.key = pageParam.key;
                    }
                }else if(ret.errcode==110){
                    //closeClick();
                }else {
                    lanYun.toast(ret.msg);
                }
	        });
	    };

        // 实例化vue
	    lanYun.newVue('#vuea', {
            shoptype:pageParam.shoptype,//判断显示什么按钮  shop editsuk tuanshop 三种
            def:{key:''},
            Pdata:{ skudata:skuData },
            xtype:pageParam.xtype
	    },function(e) {
	        getData(2);
	    });

        // 自定义指令 将已选择的规格选中
        Vue.directive('funtext', {
            inserted:function (el,val) {
                var defkey = '-'+ pageParam.key +'-';
                if(defkey.indexOf('-'+val.value.toLowerCase()+'-') != -1) {
                    el.className = 'on';
                }
                el.innerHTML = val.value;
            }
        });

	    //-------华丽的分割线--------------------------------
	    closeClick = function(){
	        api.closeFrame();
	    };

	    //选择规格
	    skuItemClick = function(tis) {
	        if($(tis).hasClass('on')){
	        	return;
	        }else{
	            $(tis).parent().find('span').removeClass('on');
	            $(tis).addClass('on');
	        }
	        getOnSkuKeys();
	    };

		//加减数量
	    setBuyNumClick = function(tis){
	    	var type = tis.dataset.type;
            var dst = tis.dataset;
	    	if(type == 2){
				_selData.buynum++;
				if(_selData.buynum > lanYun.vue.def.num){
					_selData.buynum = lanYun.vue.def.num;
					lanYun.toast('库存不足');
					return;
				}
                if(_selData.buynum > dst.max && dst.max > 0){
					_selData.buynum = dst.max;
					lanYun.toast('已达到限购数量');
					return;
				}
			}else if(type == 1){
				_selData.buynum--;
				if(_selData.buynum < 1){
					_selData.buynum = 1
					lanYun.toast('不能再减了');
					return;
				}
			}
			$(".buynum").text(_selData.buynum);
	    }

		//获取规格的信息
	    getOnSkuKeys = function() {
	        var sukkey = '';//选中规格的标识
	        $('.skudata .on').each(function() {
	            var dst = this.dataset;
	            sukkey += dst.key.toLowerCase() + '-';
	        });
            //选中规格所有参数
            _selData.key = sukkey.substr(0,sukkey.length-1);
            //所有规格信息
            _pData.defsku = _pData.skudata[_selData.key] || null;
            //吧所选择规格信息放到def中
            lanYun.vue.def = _pData.defsku;
	    };

        // 加入购物车或立即购买
	    submitClick = function(tis) {
            if(!lanYun.isBtn) return;
            var dst = tis.dataset;
	        _selData.cktype = dst.type;
            _selData.sid = pageParam.sid;

            //参加团时需要的id
            // if(_selData.cktype == 'gotuan'){
            //     _selData.tuanid = pageParam.tid;
            // }

            if(_selData.cktype == 'jifen' || _selData.cktype == 'buy' || _selData.cktype == 'xinren'){
                if(!lanYun.isLogin()){
                    lanYun.openLogin();
                    return;
                }
            }
            if(_pData.defsku.num == 0){
                lanYun.toast("库存不足")
                return;
            }
	        api.execScript({ frameName:pageParam.frameName, script:'lyFrameCallBack('+JSON.stringify(_selData)+');'});
	        closeClick();
	    };

	});

</script>
</body>
</html>
